<template>
  <div class="index">
   
    <div class="bnrs" @click="bindViewTap">
        <img src="/static/img/index_banner.jpg">
    </div>

    <div class="nav">
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/8b5e1702d4145ccf058ba5fb31008c5310912.png">
             <span class="logo-text">美食</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p0.meituan.net/jungle/45ff2f098a20a77122bff8385192f0ec10547.png">
             <span class="logo-text">美团超市</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/12a9834827909fa55f54bce96e67470711250.png">
             <span class="logo-text">生鲜果蔬</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/da9181f93dd2e11c5d74cf685470408f10016.png">
             <span class="logo-text">美团专卖</span>
        </a>
         <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/6104c5bf33953d659142807d2905b0c39927.png">
             <span class="logo-text">夜宵</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/e54f1fe77b0588d2dfe82a12e424108a9450.png">
             <span class="logo-text">甜点饮品</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p0.meituan.net/jungle/2ec76f8f4f21a4ec163adc7fccfa1a399428.png">
             <span class="logo-text">小吃馆</span>
        </a>
        <a href="/pages/counter/main" class="menu-nav">
             <img class="logo-icon" src="http://p1.meituan.net/jungle/8b5e1702d4145ccf058ba5fb31008c5310912.png">
             <span class="logo-text">家常菜</span>
        </a>
    </div>

    <div class="merchant">
        <div class="top-placeholder"><div class="top-placeholder-inner">附近商家</div></div>
        <div class='merchantList'>
             <div class="merchantItem">
                 1321
             </div>
        </div>
    </div>
   
  </div>
</template>

<script>
import card from '@/components/card'
import store from '@/store/index'
import * as API from '@/api/index'

export default {

  data () {
    return {
        userInfo: {}
    }
  },

  components: {
    card
  },

  computed: {
    count () {
      return this.$store.state.base.count
    }
  },

  methods: {
    bindViewTap () {
      const url = '/pages/counter/main'
      wx.navigateTo({ url })
    },
    getUserInfo () {
      //调用登录接口
      wx.login({
        success: () => {
          wx.getUserInfo({
            success: (res) => {
              this.userInfo = res.userInfo
            }
          })
        }
      })
    },
    clickHandle (msg, ev) {
      console.log('clickHandle:', msg, ev)
    }
  },

  created () {
    console.log(API);
    // 调用应用实例的方法获取全局数据
    this.getUserInfo()
    //测试API
    API.test({});
    /*
    API.merchantList({
      success:(res)=>{
        console.log(res);
      }
    });
    */
  }
}
</script>

<style scoped>

.index {
  font-size:14px;
}

.bnrs {
  background: #fff;
}

.bnrs img {
  height:320rpx;
  width:100%;
}

.nav {
  border:0px;
  height:200px;
}

.menu-nav {
  border:0px;
  background:#fff;
  float: left;
  width: 25%;
  padding: 15px 0px;
}

.logo-icon {
  width:47px;
  height:47px;
  display: block;
  margin: 0 auto 12px;
}

.logo-text {
  display:block;
  line-height: 1em;
  text-align: center;
  font-size: 13px;
  color: #2f2f2f;
}

.merchant {
    background: #fff;
    margin-top:10px;
}

.merchantList {
    padding:0 20px;
}

.top-placeholder {
  text-align:center;
}

.top-placeholder-inner {
    display: inline-block;
    position: relative;
    font-size:16px;
    font-weight:bold;
    height:30px;
    line-height: 30px;
    color: #333;
}

.top-placeholder-inner:before {
    left: -32px;
}

.top-placeholder-inner:before, .top-placeholder-inner:after {
    content: '';
    position: absolute;
    top: 15px;
    width: 35px;
    height: 0;
    font-size: 0;
    border-top: 1px solid #ccc;
}

</style>
